import React, { useEffect, useState } from 'react'
import {Table,Input,Button} from 'antd'
import {observer} from 'mobx-react-lite'
import useStore from '@/context/useStore'
import styles from './proManagemen.less'
import {DelIndustry, getTableList} from '@/services'
import {IProListItem, IProListQuery} from '@/utils/interface'
import classNames from 'classnames'
import {FormOutlined,SendOutlined,DeleteOutlined,EyeOutlined,RollbackOutlined,SearchOutlined} from '@ant-design/icons'
import { Link } from 'umi'

const status = ['全部', '草稿', '已发布', '待审核', '已驳回']
const type = ['全部','生产实训','教学实训','专业群实训']

const proManagemen:React.FC = (props) => {
    let [projectVersionId, setprojectVersionId] = useState('');
    const columns = [
        {
          title: '项目名称',
          dataIndex: 'proname',
        },
        {
          title: '版本',
          dataIndex: 'version',
        },
        {
          title: '任务数量',
          dataIndex: 'taskCount',
        },
        {
            title: '所属专业',
            dataIndex: 'trade',
        },
        {
            title: '所属行业',
            dataIndex: 'major',
        },
        {
            title: '实训类型',
            render:(data:IProListItem) => <span>{type[Number(data.sxtype)]}</span>
        },
        {
            title: '推荐完成天数',
            dataIndex: 'subjecttime',
        },
        {
            title: '更新时间',
            dataIndex: 'createTime',
        },
        {
            title: '演示',
            render:(data:IProListItem) => <span>查看</span>
        },
        {
            title: '状态',
            render:(data:IProListItem) => <span className={styles[`status${data.status}`]}>{status[Number(data.status)]}</span>
        },
        {
            title: '操作',
            render:(data:IProListItem) => {
                if(data.status === '1'){
                    return <div>
                        <Link to={`/teachers/addProject?versionId=${data.versionId}&proId=${data.id}&see=false`}>
                            <FormOutlined />
                        </Link>
                        <SendOutlined className={styles.icon} />
                        <DeleteOutlined className={styles.icon} onClick={() => {
                            alert('删除成功')
                            setprojectVersionId(data.versionId)
                        }} />
                    </div>
                }else if(data.status === '2'){
                    return <div>
                        <EyeOutlined className={styles.icon} />
                    </div>
                }else if(data.status === '3'){
                    return <div>
                        <EyeOutlined className={styles.icon} />
                        <RollbackOutlined className={styles.icon} />
                    </div>
                }
            }
        },
      ];
      //表格列表
    let [tableList,setTabList] = useState<IProListItem[]>([])
    let [proName,setProName] = useState('')
    let [title,setTitle] = useState('')
    let [trade,setTrade] = useState('')
    let [major,setMajor] = useState('')
    let [curstatus,setCurstatue] = useState(0)
    let [sxtype,setSxtype] = useState(0)
    let params:IProListQuery = {isAsc: 'desc',pageNum: 0 ,pageSize: 0,proName,newProjectList: 0,status:curstatus,sxtype:sxtype}
    let {managemen} = useStore()
    useEffect(() => {
        managemen.getMajorList()
        managemen.getTradeList()
    },[])
    useEffect(() => {
        if(curstatus){
            params = {...params,industryTag:trade,specialtyTag:major}
        }else{
            params = {...params,industryTag:trade,specialtyTag:major}
        }
        getTableList(params).then(res => {
            console.log(res);
            setTabList(res.rows)
        })
    },[trade,major,curstatus,sxtype,proName])
    useEffect(() => {
        DelIndustry(projectVersionId).then(res => {
            if(res.code === 200){
                getTableList(params).then(res => {
                    console.log(res);
                    setTabList(res.rows)
                })
            }
        })
    },[projectVersionId])
    return (
        <div className={styles.proManagemen}>
            <section className={styles.sec}>项目 / 项目管理</section>
            <div className="nav">
                <div className={styles.navCon}>
                    <span> 实训类型： </span>
                        {
                            type.map((item,i) => {
                                return <span key={i} className={i===sxtype?classNames(styles.active,styles.navList):styles.navList} onClick={() => setSxtype(i)}>  {item}  </span>
                            })
                        }
                </div>
                <div className={styles.navCon}>
                    <span> 行业： </span>
                        {
                            [{value:'',label:'全部'},...managemen.tradeList].map(item => {
                                return <span key={item.value} className={item.value===trade?classNames(styles.active,styles.navList):styles.navList} onClick={() => setTrade(item.value)}>{item.label}</span>
                            })
                        }
                </div>
                <div className={styles.navCon}>
                    <span> 专业： </span>
                        {
                            [{value:'',label:'全部'},...managemen.majorList].map(item => {
                                return <span key={item.value} className={item.value===major?classNames(styles.active,styles.navList):styles.navList} onClick={() => setMajor(item.value)}>{item.label}</span>
                            })
                        }
                </div>
                <div className={styles.navCon}>
                    <span> 状态： </span>
                        {
                            status.map((item,i) => {
                                return <span key={i} className={i===curstatus?classNames(styles.active,styles.navList):styles.navList} onClick={() => setCurstatue(i)}>  {item}  </span>
                            })
                        }
                </div>
            </div>
            <section className={styles.sec2}>
                <div><input type="checkbox" />仅看最新版本</div>
                <div>
                    <Input className={styles.input2} placeholder="搜索岗位" suffix={<SearchOutlined onClick={() => setProName(title)} />} value={title} onChange={e => setTitle(e.target.value)} onKeyUp={e => {
                        if (e.keyCode === 13) {
                            setProName(title)
                        }
                    }} />
                </div>
                <div>
                    <Link to='/teachers/addProject?see=false'>
                        <Button type='primary'>+添加项目</Button>
                    </Link>
                </div>
            </section>
            <Table rowKey='id' dataSource={tableList} columns={columns} />;
        </div>
    )
}

export default observer(proManagemen)